<!--
 * @Description: 
 * @Date: 2023-03-31 22:18:09
 * @LastEditTime: 2023-04-03 18:19:22
 * @Author: Black
 * @FilePath: \store_admin\src\components\IndexChart.vue
-->
<template>
  <el-card shadow="never">
    <template #header>
      <div class="flex justify-between">
        <span class="text-sm">订单统计</span>
        <div>
          <el-check-tag v-for="(item, index) in options" :key="index" @click="handleChartChoose(item.value)"
            :checked="current == item.value" style="margin-right: 8px">
            {{ item.text }}
          </el-check-tag>
        </div>
      </div>
    </template>

    <div ref="el" class="flex justify-center items-center" id="chart" style="width: 100%; height: 300px;"></div>
  </el-card>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import { getStatistics3 } from '~/api/index.js'
import { useResizeObserver } from '@vueuse/core'

const current = ref("week")
const options = [{
  text: "近一个月",
  value: "month"
}, {
  text: "近一周",
  value: "week"
}, {
  text: "近24小时",
  value: "hour"
}]

const handleChartChoose = (type) => {
  current.value = type
  getData()
}

var myChart = null;

onMounted(() => {
  var chartDom = document.getElementById('chart')
  if (chartDom) {
    myChart = echarts.init(chartDom)
    getData()
  }
})

onBeforeUnmount(() => {
  // 在页面加载之前如果myChart存在则销毁
  if (myChart) echarts.dispose(myChart)
})


function getData() {
  var option = {
    tooltip: {
      trigger: 'axis'
    },
    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        magicType: {
          show: true,
          type: ['line', 'bar'],
          title: {
            line: '折线图',
            bar: '柱状图'
          }
        },
        dataView: {
          show: true, readOnly: false, title: '数据视图',
          lang: {
            0: '数据视图',
            1: '关闭',
            2: '刷新'
          }
        },
        restore: { show: true, title: '还原' },
        saveAsImage: { show: true, title: '保存为图片' }
      }
    },
    calculable: true,
    xAxis: {
      type: 'category',
      data: [],
      name: '时间'
    },
    yAxis: {
      type: 'value',
      name: '订单量',
    },
    series: [
      {
        data: [],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        },
        lineStyle: {
          width: 5,
          color: {
            type: 'linear',
            colorStops: [{
              offset: 0,
              color: '#6e51ff' // 0% 处的颜色
            },
            {
              offset: 0.4,
              color: '#6e51ff' // 100% 处的颜色
            }, {
              offset: 1,
              color: '#6e51ff' // 100% 处的颜色
            }
            ],
            globalCoord: false // 缺省为 false
          },
          shadowColor: '#9bd6ef',
          shadowBlur: 10,
          shadowOffsetY: 7
        },
        itemStyle: {
          color: '#6e51ff',
          borderColor: "#6e51ff"
        },
        smooth: true,
        markLine: {
          data: [
            { type: 'average', name: '平均值' }
          ]
        }
      }
    ]
  }

  myChart.showLoading()
  getStatistics3(current.value).then(res => {
    // console.log(res);
    option.xAxis.data = res.x
    option.series[0].data = res.y
    myChart.setOption(option)
  }).finally(() => {
    myChart.hideLoading()
  })

}

// 实现myChart自适应页面大小
const el = ref(null)
useResizeObserver(el, (entries) => myChart.resize())

</script>
